@charset "UTF-8"

.todo-app {
    min-height 66vh
    width 100vw
    background-color #f5f5f5
    letter-spacing 0

    h2 {
        font-size 60px
        line-height 1.2
        font-weight 200
        text-align center
        color #b63f45
        font-family "Helvetica Neue", Helvetica, Arial, sans-serif
    }

    .middle-box {
        width 96%
        margin 1em auto
        min-height 40vh
        //background-color #fff

        overflow hidden

        .header {
            display flex
            justify-content flex-start
            align-item center
            padding 3px 0
            background-color #fff
            box-shadow inset 0 -2px 1px rgba(0,0,0,0.03)


            p.toggle-all-wrap {
                flex: 0 0 50px
                height: inherit
                //background: #ccc;
                position relative
                overflow: hidden

                // 把 input.toggle-all 设置为隐藏状态
                input.toggle-all {
                    width 1px
                    height 1px
                    border none
                    position: absolute
                    opacity: 0;
                    right 100%
                    bottom 100%
                }
                // - 让 label 填充 p 标签,
                .toggle-all + label {
                    width 100%
                    height 100%
                    position absolute
                    left -5px
                    top 0
                    transform rotate(90deg)
                }
                .toggle-all + label:before {
                    content '❯'
                    font-size 22px
                    color #e6e6e6
                }
                .toggle-all:checked + label:before {
                    color #6c9
                }
            }

            input.new-todo {
                flex: 1 1 auto
                padding 9px
                font-size 22px
                line-height 1.4
                border none
            }
        }

        .main {
            .todo-list li {
                font-size 20px
                min-height 40px
                border-bottom 1px solid rgba(0, 0, 0, 0.06)
                position relative
                border-radius: 4px
                background-color #fff
                overflow: hidden

                li:last-child {
                    border-bottom none
                }

                li.editing {
                    border-bottom none
                    padding 0
                }
                li.editing .edit {
                    display block
                    width calc(100% - 43px)
                    padding 12px 16px
                    margin 0 0 0 43px
                }
                li.editing .view {
                    display none
                }


                input.toggle {
                    text-align center
                    width 40px
                    height auto
                    position absolute
                    top 0
                    left 0
                    bottom 0
                    border none
                    appearance none
                }
                input.toggle {
                    opacity 0
                }

                label {
                    padding: 15px 15px 15px 60px
                    display: block
                    line-height: 1.2
                    transition: color 0.4s
                    font-weight: 400
                    color: #4d4d4d
                    text-align left
                    background-color: inherit
                }
                input.toggle + label {
                    background-image url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E')
                    background-repeat no-repeat
                    background-position center left 5px
                }
                input:checked + label {
                    background-image url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E')
                }
                .destroy {
                    position absolute
                    top 0
                    right 10px
                    bottom 0
                    width 40px
                    margin auto 0
                    font-size 30px
                    color #cc9a9a
                    border none
                    transition color 0.2s ease-out
                }
                .destroy:hover {
                   color #af5b5e
                }
                &:hover .destroy {
                    display block
                }
                &:hover .destroy::after {
                    content: '×';
                }

                .edit {
                    display none
                }
            }
            li.completed label {
                color: #cdcdcd
                text-decoration line-through
            }
        }

        .footer {
            background-color #fff
            padding: .5em .3em
            min-height 3.6em
            display flex
            justify-content space-between
            align-items flex-start
            box-shadow 0 1px 1px rgba(0, 0, 0, 0.2),
                0 8px 0 -3px #f6f6f6,
                0 9px 1px -3px rgba(0, 0, 0, 0.2),
                0 16px 0 -6px #f6f6f6,
                0 17px 2px -6px rgba(0, 0, 0, 0.2)

            span.todo-count ul.filters{
                flex 1 1 auto
            }

            span.todo-count {
                flex: 0 0 3.4em
                font-size: 1em
                width: calc(0.5em + 12vw)
                margin-left 5px
                line-height: initial
                text-align center

                strong {
                    font-weigth: 300
                }
            }

            ul.filters {
                display flex
                justify-content center
                align-item center
                margin: 0 5px

                li {
                    a {
                        color: inherit
                        text-align center
                        padding: .3em .4em
                        margin-left .5em
                        border-radius: 3px
                    }
                    a.selected {
                        background-color: #6c9
                        color: #fff
                    }
                    a:hover {
                        text-decoration: none
                        background-color: #91d7b4
                        color: #fff
                    }
                }
            }

            p {
                width: 6em
                font-size: 1em
                min-height: 50px
                margin-right 5px
                text-align: center
            }
            button.clear-completed {
                line-height: initial
                border: 0
                padding: 0
            }
            button.clear-completed:hover {
                text-decoration: underline
            }

        }
    }
}
